<html>
<head>
    <title>大屏展示</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>


        .head {
            z-index: 2;
            top: 0px;
            left: 0px;
            position: absolute;
            width: 100%;
            overflow: hidden;
        }

        .head-item {
            text-align: center;
            padding: 10px;
            background: #0F517D;
            opacity: 0.9;
            border-radius: 3px;
        }

        .head-item h1 {
            margin-top: 0px;
            font-size: 30px;
            margin-bottom: 0px;
            font-family: 'Arial-BoldMT';
        }

        .head-item h3 {
            margin-top: 0px;
            font-family: 'NotoSansHans-Bold';
            margin-bottom: 0px;
            font-size: 14px;
        }

        .head-item.jie {
            color: #44D1DD;
        }

        .head-item.dev {
            color: #30E7A3;
        }

        .head-item.alarm {
            color: #FF3D50;
        }

        .head-item.online {
            color: #12E266;
        }

        .head-item.unline {
            color: #FFC526;
        }

        .left {
            width: 250px;
            min-height: 200px;
            border: solid 1px red;
            border-radius: 4px;
            position: absolute;
            left: 10px;
            top: 170px;
            background: #0F517D;
            opacity: 0.9;
            padding: 20px 0px 20px 0px;
        }

        .left .title {
            background: #DB4F53;
            line-height: 40px;
            color: #fff;
            text-align: center;
            font-weight: 700;
            font-size: 14px;
        }

        .left .line {
            height: 1px;
            background: rgb(53, 117, 122);
            width: 90%;
            margin: 10px auto;
        }

        .left .table {
            width: 90%;
            margin: 10px auto;
            color: #fff;
            font-size: 14px;
        }

        .left .table i {
            display: inline-block;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background: #CA595C;
            border-radius: 4px;
        }

        .left .table .number {
            background: #0A304B;
            color: #CA595C;
            font-size: 12px;
            font-style: normal;
        }

        .right {
            width: 250px;
            min-height: 200px;
            border: solid 0px red;
            border-radius: 4px;
            position: absolute;
            right: 10px;
            top: 100px;
            opacity: 0.9;
            color: #fff;
        }

        .right .chart-title {
            background: #0C5D93;
        }

        .right .chart-outer {
            height: 140px;
            background: #0F517D;
            padding: 0px;
        }

        .right .chart-wrap {
            background: transparent;
        }

        .map {
            width: 100%;
            height: 100%;
            background: cadetblue;
            position: absolute;
            top: 0px;
            left: 0px;
            overflow: hidden;
        }

        .el-dialog {
            background: #003C63;
            box-shadow: #0D5887 0px 0px 10px 5px;
        }

        .el-dialog__title {
            color: #FFC526;
        }

        .el-dialog__body {
            padding-top: 0px;
            color: #fff;
        }

        .alarm-outer {
            border: solid 1px #0D5887;
            width: 100%;
            height: 300px;
            color: #fff;
            background: #06304A;
            font-size: 12px;
        }

        .alarm-item {
            border: solid 1px red;
            height: 120px;
            overflow: hidden;
        }

        .alarm-item h6, .alarm-item p {
            margin: 0px 0px 5px 0px;
        }

        .alarm-item h6 {
            line-height: 30px;
            background: #0D5887;
        }

        .alarm-item .btn {
            margin-right: 10px;
        }

        .alarm-item .btn img {
            height: 18px;
        }

        .alarm-video {
            border: solid 1px #0D5887;
            height: 200px;
        }

        .alarm-video video {
            height: 100%;
            width: 100%;
        }

        .table-detail {
            color: #fff;
            font-size: 14px;
            width: 100%;
        }

        .table-detail td {
            line-height: 25px;
        }

        .table-detail .text {
            background: rgba(242, 242, 242, 0.1);
            border-radius: 4px;
            padding-left: 5px;
        }

        .panel-f {
            text-align: center;
            color: #485465;
            width: 83%;
            background: #BDD0DD;
            border-radius: 5px;
            border: 0px;
            height: 180px;
            padding-top: 5px;
            text-align: left;
        }

        .panel {
            padding: 10px;
            color: #fff;
            background: #123272;
            margin-bottom: 20px;
        }

        .panel-f p {
            margin-bottom: 0px;
            margin-left: 10px;
            line-height: 10px;
            white-space: nowrap;
            font-size: 1rem;
        }

        .panel-f h5 {
            font-weight: 700;
            margin-top: 10px;
        }

        .panel-f:last-child {
            margin-right: -5px;
        }

        a:visited {
        }

        /* 已访问的链接 */

        a:hover {
            text-decoration: underline;
            color: red
        }

        /* 当有鼠标悬停在链接上 */

        a:active {
        }

        /* 被选择的链接 */
    </style>

</head>
<body>
<div class="page" id="page-vue">

    <div class="map">
        <chart-map
                ref="chartMap"
                :mapstyle="SiteConfig.mapStyle"
                :markers="map.markers"
                :center="map.center"
                :zoom="map.zoom"
                v-on:click-marker="onMarker"
                v-on:on-zoom="onZoom">
            <info-win :title="map.winTitle" :point="map.winPoint">
                <div v-html="map.winText"></div>
                <!--
                <p>{{map.winText}}</p>
                <el-button size="mini" @click="goDetail">进入</el-button>
                -->
            </info-win>
        </chart-map>
    </div>

    <div class="head">
        <el-row :gutter="20" style="margin: 10px 0px;">
            <el-col :span="5">
                <div class="head-item jie" @click="showPro()" title="接入数量" style="cursor:hand">
                    <h1>{{joinTotal.totalProjects}}</h1>
                    <h3>总接入数 (家)</h3>

                </div>
            </el-col>
            <el-col :span="5">
                <div class="head-item dev">
                    <h1>{{joinTotal.totalDevices}}</h1>
                    <h3>总设备数量 (台)</h3>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="head-item alarm">
                    <h1>{{joinTotal.totalErrorDevices}}</h1>
                    <h3>报警设备 (台)</h3>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="head-item online">
                    <h1>{{joinTotal.totalOnlineDevices}}</h1>
                    <h3>在线数量 (台)</h3>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="head-item unline">
                    <h1>{{ joinTotal.totalDevices-joinTotal.totalOnlineDevices}}</h1>
                    <h3>离线数量 (台)</h3>
                </div>
            </el-col>
        </el-row>
    </div>

    <div class="left">
        <div class="title">月报警排行</div>
        <div class="line"></div>
        <table class="table">
            <tr v-for="(item,index) in alarmTops" @click="goScene(item.projectNo)" style="cursor:hand">
                <td><i>{{index+1}}</i></td>
                <td>{{item.projectName}}</td>
                <td style="text-align: right"><i class="number">{{item.errorCount}}</i></td>
            </tr>
        </table>
    </div>

    <div class="right">
        <div class="chart-title">故障类别柱状图</div>
        <div class="chart-outer">
            <chart-elex :option="chartOptionAlarm"></chart-elex>
        </div>

        <div class="chart-title">在线率</div>
        <div class="chart-outer">
            <chart-elex :option="chartOptionOnline"></chart-elex>
        </div>
    </div>


    <el-dialog title="新的报警" :visible.sync="dlgAlarmVisible" width="400" style="margin-top:10px;">
        <table class="table-detail">

            <tr>
                <td>报警时间：</td>
                <td class="text">{{alarmNew.LogTime}}</td>
            </tr>
            <tr>
                <td>报警类别：</td>
                <td class="text">{{alarmNew.LogTime}}</td>
            </tr>
            <tr>
                <td>主体：</td>
                <td class="text">{{alarmNew.DevName1}}</td>
            </tr>
            <tr>
                <td>描述：</td>
                <td class="text">{{alarmNew.ErrorName}}</td>
            </tr>
        </table>
    </el-dialog>


    <el-dialog title="项目列表" :visible.sync="proVisible" width="90%" style="margin-top:10px;height: 80%">
        <div style="margin-top: 10px;">
            <el-row style="flex-wrap: nowrap">
                <el-col :span="8" v-for="(item,index) in  map.markers">
                    <a @click="goScene(item.proNo)" style="font-size:large">{{item.name}}</a>
                    <div class="panel panel-f">
                        <el-row type="flex">
                            <image src="../../../imgs/project.png" style="width: 50%; height: 60px;"></image>
                            <div>
                                <p>设备总数:　{{item.devCount}}</p>
                                <p>在线设备:　{{item.onlineCount}}</p>
                            </div>
                        </el-row>

                        <p>故障设备:　{{item.errorCount}}</p>
                        <p>本日能耗:　{{item.energyDay==null?'':item.energyDay+'　tce'}}</p>
                        <p>本月能耗:　{{item.energyMonth==null?'':item.energyMonth+'　tce'}}</p>
                        <p>本年能耗:　{{item.energyYear==null?'':item.energyYear+'　tce'}}</p>
                        <p>本月电耗:　{{item.eleMonth==null?'':item.eleMonth+'　KWH'}}</p>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-dialog>


</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GSkyZRDlTKcIqzerwITZvxee"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

<script>

    var vuePage = new Vue({
        el: '#page-vue',
        data: {
            dlgAlarmVisible: false,
            map: {
                markers: [],
                winTitle: '化工总厂',
                winText: '',
                winPoint: {},
                center: {lng: 0, lat: 0},
                zoom: 5
            },
            chartOptionAlarm: {},
            chartOptionOnline: {},

            joinTotal: {
                totalProjects: 0,
                totalDevices: 0,
                totalOnlineDevices: 0,
                totalErrorDevices: 0
            }, //接入统计

            alarmTops: [],
            alarmDatas: [], //存放比对后的新告警，新告警需弹出提示
            alarmNew: {},
            proVisible: false,
        },
        methods: {
            aa() {
            },
            showPro() {
                this.proVisible = true;
            },
            goScene(proNo) {
                window.open("../device/scene-map.html?proNo=" + proNo, '_blank')
            },
            goDetail() {
                this.map.winText = Math.random();
            },
            onMarker(mdata) {
                //alert(JSON.stringify(mdata));
                this.map.winTitle = mdata.name;
                this.map.winText = '设备总数：' + mdata.devCount +
                    '<br>在线设备：' + mdata.onlineCount +
                    '&nbsp;&nbsp;故障设备：' + mdata.errorCount +
                    '<br>联系人员：' + mdata.manager +
                    '<br>联系电话：' + mdata.phone,
                    this.map.winPoint = {
                        lat: mdata.lat,
                        lng: mdata.lng
                    };
            },
            onZoom(zoom) {
                //alert(zoom);
                if (zoom == 5) {  //省

                } else if (zoom == 10) {  //区

                }
            },
            onAlarmDetail() {
                this.dialDetailVisible = true;
            },
            refreshData() {
                var _self = this;

                //弹出最新告警
                HttpUtil.get('Error/List', {
                    ProcessFlag: "0,1",
                    pagesize: 10,
                    LogType: 0,
                    UserId: SiteConfig.account.id
                }).success(function (data) {
                    console.log('getAlarms', data);
                    var datas = data.data;
                    for (var i = 0; i < datas.length; i++) {
                        var isnew = true;
                        for (var j = 0; j < _self.alarmDatas.length; j++) {
                            if (_self.alarmDatas[j].Id == datas[i].Id) {
                                isnew = false;
                                break;
                            }
                        }

                        if (isnew) {
                            _self.alarmDatas.unshift(datas[i]);
                            _self.alarmNew = datas[i];
                            _self.userSummary.totalErrors++;
                            if (_self.alarmDatas.length > 20) {
                                _self.alarmDatas.pop();
                            }
                            setTimeout(() => {
                                _self.dlgAlarmVisible = true;
                            }, 1000);
                        }
                    }

                    setTimeout(() => {
                        _self.refreshData();
                    }, 5000);

                });
            },

            refreshChart() {
                var _self = this;

                //报警类别柱状图
                var param = {
                    UserId: 0, //0表示当前用户
                    year: 0,//0表示当前年
                    month: 0 //0表示当前月
                };
                HttpUtil.get('Analysis/getUserErrorGroupSummary', param).success(function (data) {
                    console.log('getUserErrorGroupSummary', data);
                    var xlabels = [], values = [], _datas = data.data;
                    for (var i = 0; i < _datas.length; i++) {
                        xlabels.push(_datas[i].groupName);
                        values.push(_datas[i].errorCount);
                    }

                    _self.chartOptionAlarm = {
                        grid: {
                            top: 20,
                            bottom: 10,
                            left: 10,
                            right: 10,
                            containLabel: true //包含标签
                        },
                        xAxis: {
                            type: 'category',
                            data: xlabels
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: values,
                            type: 'bar',
                            barMaxWidth: 20,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        return SiteConfig.chartColors[params.dataIndex];
                                    }
                                }
                            }
                        }],
                        textStyle: {
                            color: '#fff'
                        }
                    };
                });


                //设备在线，离线图表
                HttpUtil.get('Analysis/getUserSummary', param).success(function (_data) {
                    _self.chartOptionOnline = {
                        grid: {
                            top: 10
                        },
                        series: [
                            {
                                name: '在线率',
                                type: 'pie',
                                radius: '65%',
                                center: ['50%', '50%'],
                                data: [
                                    {value: _data.data.totalErrorDevices, name: '告警'},
                                    {value: _data.data.totalDevices - _data.data.totalOnlineDevices, name: '离线'},
                                    {value: _data.data.totalOnlineDevices, name: '在线'},

                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    normal: {
                                        formatter(v) {
                                            let text = `\n${Math.round(v.percent)}%\n${v.name}`;
                                            return text;
                                        }
                                    }
                                },
                            }
                        ]
                    };
                });
            }

        },
        created: function () {
            var _self = this;

            //用户接入统计
            var param = {
                UserId: 0, //0表示当前用户
                year: 0,//0表示当前年
                month: 0 //0表示当前月
            };
            HttpUtil.get('Analysis/getUserSummary', param).success(function (data) {
                console.log('getUserSummary', data);
                _self.joinTotal = data.data;
            });

            //告警排名
            HttpUtil.get('Analysis/getUserErrorSummary', param).success(function (data) {
                console.log('getUserErrorSummary', data);
                _self.alarmTops = data.data;
            });


            this.refreshData();

            //this.dlgAlarmVisible = true;


        },
        mounted: function () {
            var _self = this;
            //地图
            HttpUtil.get('Project/List', {pagesize: 200}).success(function (data) {
                //console.log('getList',data);
                var datas = data.data;
                console.log('getProList', datas);
                for (var i = 0; i < datas.length; i++) {
                    _self.map.markers.push({
                        lat: datas[i].lat,
                        lng: datas[i].lng,
                        text: datas[i].onlinecount,
                        name: datas[i].projectName,
                        devCount: datas[i].devicecount,
                        onlineCount: datas[i].onlinecount,
                        errorCount: datas[i].errorcount,
                        proNo: datas[i].projectNo,
                        eleMonth: datas[i].EletricMonth,
                        energyMonth: datas[i].energyMonth,
                        energyDay: datas[i].energyDay,
                        energyYear: datas[i].energyYear,
                        img: datas[i].img,
                        manager: datas[i].manager,
                        phone: datas[i].phone,
                    });
                }
            });


            this.refreshChart();

        }
    });


</script>
</body>
</html>
